{% extends 'backend.html.twig' %}

{% block body %}
    <button id="act_create">Create</button>
    <button id="act_reload">Reload</button>
    <div id="wrapper">
        <div id="container">
            <table border="1" cellspacing="0">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Unique Code</th>
                    <th>Description</th>
                    <th>Price</th>
                    <th>Inventory</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody id="table_body">
                </tbody>
            </table>
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    <script>
        (function ($) {
            $(function () {
                var table_body = $("#table_body");

                var removeRow = function () {
                    var ele = $(this).closest("tr");
                    var rowdata = JSON.parse(ele.attr("data-row"));
                    console.log(rowdata);
                    layer.confirm('Would you confirm remove "' + rowdata.name + '"？', {
                        btn: ['Yes', 'No'] //按钮
                    }, function () {
                        $.post("{{ asset("material/remove") }}", {id: rowdata.id}, function (res) {
                            console.log(res);
                            if (parseInt(res.code) === 0) {
                                ele.remove();
                            }
                            layer.msg(res.message);
                        });

                    }, function () {
                    });
                };
                var editRow = function () {
                    var row = $(this).closest("tr");
                    var rowdata = JSON.parse(row.attr("data-row"));
                    console.log(rowdata);
                    $.post("{{ asset("material/info") }}", {id: rowdata.id}, function (res) {
                        rowdata = res.data;
                        var acindex = layer.open({
                            title: 'Edit Material',
                            content: '<form id="act_edit_form">' +
                            '<input type="hidden" name="id" value="' + rowdata.id + '">' +
                            '        <label>Name</label>' +
                            '        <input name="name" value="' + rowdata.name + '"/><br>' +
                            '        <label>Description</label>' +
                            '        <textarea name="description">' + rowdata.description + '</textarea><br>' +
                            '        <label>Price</label>' +
                            '        <input name="price" value="' + rowdata.price + '"/><br>' +
                            '        <label>Inventory</label>' +
                            '        <input name="inventory"  value="' + rowdata.inventory + '"/><br>' +
                            '    </form>',
                            yes: function () {
                                $.post("{{ asset("material/edit") }}", $("#act_edit_form").serialize(), function (res) {
                                    console.log(res);
                                    if (parseInt(res.code) === 0) {
                                        row.find(".row_name").html(res.data.name);
                                        row.find(".row_description").html(res.data.description);
                                        row.find(".row_price").html(res.data.price);
                                        row.find(".row_inventory").html(res.data.inventory);
                                        layer.close(acindex);
                                    }
                                    layer.msg(res.message);
                                });
                            }
                        });
                    });

                };
                var createRow = function (data) {
                    var ele = $(
                        "<tr data-row='" + JSON.stringify(data) + "'>                    <td>" + data.id + "</td>" +
                        "                    <td class='row_name'>" + data.name + "</td>" +
                        "                    <td class='row_unique_code'>" + data.unique_code + "</td>" +
                        "                    <td class='row_description'>" + data.description + "</td>" +
                        "                    <td class='row_price'>" + data.price + "</td>" +
                        "                    <td class='row_inventory'>" + data.inventory + "</td>" +
                        "<td><button class='act-edit' data-id='" + data.id + "'>edit</button><button class='act-remove' data-id='" + data.id + "'>remove</button></td><tr>");
                    ele.find("button.act-edit").click(editRow);
                    ele.find("button.act-remove").click(removeRow);
                    return ele;
                };
                var reload = function () {
                    $.get("{{ asset("material/list") }}", function (res) {
                        console.log(res);
                        if (parseInt(res.code) === 0) {
                            table_body.empty();
                            for (var x in res.data) {
                                table_body.append(createRow(res.data[x]))
                            }
                            $("button.act-edit").unbind("click").click(editRow);
                        } else {
                            return layer.msg(res.message);
                        }
                    });

                };

                $("#act_create").click(function () {
                    var acindex = layer.open({
                        title: 'Create Meterial',
                        content: '<form id="act_createtion_form">' +
                        '        <label>Name</label>' +
                        '        <input name="name"/><br>' +
                        '        <label>Description</label>' +
                        '        <textarea name="description"></textarea><br>' +
                        '        <label>Price</label>' +
                        '        <input name="price"/><br>' +
                        '        <label>Inventory</label>' +
                        '        <input name="inventory" value="0"/><br>' +
                        '    </form>',
                        yes: function () {
                            $.post("{{ asset("material/creation") }}", $("#act_createtion_form").serialize(), function (res) {
                                console.log(res);
                                if (parseInt(res.code) === 0) {
                                    var ele = createRow(res.data);
                                    table_body.append(ele);
                                    ele.find("button.act-edit").click(editRow);
                                    ele.find("button.act-remove").click(removeRow);
                                    layer.close(acindex);
                                }
                                layer.msg(res.message);
                            });
                        }
                    });
                });
                $("#act_reload").click(reload);
                reload();
            });
        })(jQuery);
    </script>


{% endblock %}
